<template>
	<view class="guide-container">
		<swiper v-if="isShow" class="swiper" :circular="false" indicator-dots indicator-color="#F2F2F2"
			indicator-active-color="#4EA770" :autoplay="false" :interval="5000" :duration="300">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">
					<view class="skip" @click="skip">跳过</view>
					<image :src="item.image" />
					<view class="title" v-if="item.title" v-html="item.title" />
					<view class="subtitle" v-if="item.subtitle" v-html="item.subtitle" />
					<view class="button" v-if="item.showButton" @click="skip">立即体验</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import page1 from "@/static/guide/page1.png";
	import page2 from "@/static/guide/page2.png";

	onMounted(() => {
		const isFirstOpen = uni.getStorageSync("isFirstOpen");
		if (isFirstOpen) {
			uni.redirectTo({
				url: "/pages/index/index",
			});
		} else {
			isShow.value = true;
			uni.setStorageSync("isFirstOpen", true);
		}
	});

	const list = ref([{
			image: page1,
			title: "强化现场一致性管理",
			subtitle: "加强诚信化监管体系",
			showButton: false,
		},
		{
			image: page2,
			title: "社会消防技术服务<p>机构管理平台",
			showButton: true
		},
	]); // 引导页列表
	const isShow = ref(false); // 是否显示

	// 跳过
	const skip = () => {
		uni.redirectTo({
			url: "/pages/index/index",
		});
	};
</script>
<style lang="scss" scoped>
	.guide-container {
		height: 100vh;
		background-color: #fff;

		.swiper {
			height: inherit;

			.swiper-item {
				position: relative;
				height: inherit;
				background: #fff;

				.skip {
					position: absolute;
					color: #757575;
					font-size: 28rpx;
					right: 40rpx;
					top: 80rpx;
					z-index: 9;
				}

				image {
					position: absolute;
					top: 236rpx;
					left: 0;
					right: 0;
					height: 750rpx;
					width: 750rpx;
				}

				.title {
					position: absolute;
					left: 0;
					right: 0;
					text-align: center;
					bottom: 340rpx;
					font-weight: 600;
					font-size: 60rpx;
					color: #212121;
					letter-spacing: 8rpx;
				}

				.subtitle {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 240rpx;
					text-align: center;
					font-size: 28rpx;
					color: #bdbdbd;
					letter-spacing: 26rpx;
				}

				.button {
					position: absolute;
					bottom: 170rpx;
					left: 40rpx;
					right: 40rpx;
					height: 100rpx;
					background: linear-gradient(90deg, #4ea770 0%, #5fc793 100%);
					box-shadow: 0 12rpx 30rpx 2rpx rgba(78, 167, 112, 0.5);
					border-radius: 54rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 32rpx;

					&:active {
						background: linear-gradient(90deg, #4b9e6b 0%, #57b787 100%);
					}
				}
			}
		}
	}

	:deep(.uni-swiper-dots) {
		bottom: 60rpx;
	}

	:deep(.uni-swiper-dot) {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
	}

	:deep(.uni-swiper-dot-active) {
		width: 80rpx;
	}
</style>